<template>
  <view class="bottom-nav">
    <view
      v-for="(item, index) in navItems"
      :key="index"
      :class="['bottom-nav-item', { active: activeTab === item.name }]"
      @click="navigate(item.name)"
    >
      <uni-icons :type="item.icon" :color="activeTab === item.name ? '#007aff' : '#8e8e93'" size="24" />
      <text :style="{ color: activeTab === item.name ? '#007aff' : '#8e8e93' }">{{ item.label }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    activeTab: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      navItems: [
        { name: 'home', label: '首页', icon: 'home' },
        { name: 'schedule', label: '日程', icon: 'calendar' },
        { name: 'mine', label: '我的', icon: 'person' }
      ]
    }
  },
  methods: {
    navigate(tab) {
      if (this.activeTab === tab) return
      
      const tabUrls = {
        home: '/pages/home/index',
        schedule: '/pages/schedule/index',
        mine: '/pages/mine/index'
      }
      
      if (tabUrls[tab]) {
        uni.switchTab({
          url: tabUrls[tab],
          success: () => {
            this.$emit('update:activeTab', tab)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none'
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 6px 0;
  z-index: 1000;
  transition: all 0.2s ease;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 4px 0;
  gap: 2px;

  &:hover {
    transform: translateY(-4px);
  }
  
  text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }
}
</style>
